
import {onMounted} from 'vue'
import utils from '../js/index'

type Options = {
  el:string
}

export default function ({ el }: Options): Promise<{ baseUrl:string}>{
  return new Promise((resolve)=>{
    onMounted(() => {
      let img: HTMLImageElement = document.querySelector(el) as HTMLImageElement
      console.log(img, '==========>')
      img.onload = () => [
        resolve({
          baseUrl: base64(img)
        })
      ]
    })

    const base64 = (el: HTMLImageElement) => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      canvas.width = el.width
      canvas.height = el.height
      ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
      let elSrc =  utils.cutOutUrl(el.src)
      return canvas.toDataURL(`image/${elSrc}`)
    }
  })
   
  
  

 }
